@charset "utf-8";

$fontsize:20;
@function r($px){
    @return $px/$fontsize * 1rem;
}



@mixin ct{
    width: 100%;
    height: r(440);
    background: white;
    .content1{
        width: 85%;
        height: r(440);
        background: white;
        margin: 0 auto;
        line-height: r(30);
        border-bottom: 1px solid #e0e0e0;
        p{
            font-size: r(25);
            padding-top: r(10);
        }
        .content-font1{
            display: inline-block;
            padding-top: r(10);
            color: #666666;
        }
        .content-tu1{
            width: 100%;
            height: r(165);
            margin-top: r(25);
            img{
                width: 100%;
                height: 100%;
            }
        }
        .content-font2{
            float: left;
            font-size: r(25);
            margin-top: r(40);
            color: #666666;
        }
        .content-tu2{
            float: right;
            width: r(45);
            height: r(45);
            margin-top: r(30);
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
}

#shadow1{
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
//  background: rgba(0,0,0,.5);
    z-index: 99;
    .revise{
        width: 60%;
        height: r(205);
        background: rgba(0,0,0,0.7);
        margin: 0 auto;
        border-radius: 10px;
        position: absolute;
        top: r(320);
        left: r(105);
        img{
            width: r(70);
            height: r(70);
            margin: 0 auto;
            display: block;
            margin-top: r(50);
        }
        p{
            color: white;
            text-align: center;
        }
       
    }
}
#shadow2{
    width: 100%;
    height: 100%;
    display: none;
     position: absolute;
//   position: relative;
    background: rgba(0,0,0,.2);
    z-index: 99;
    .revise{
        width: 90%;
        height: r(265);
        background: #f8f8f8;
        margin: 0 auto;
        border-radius: 10px;
        position: absolute;
        top: r(320);
        left: r(30);
        .font{
            width: 90%;
            height: r(135);
            margin: 0 auto;
            border-bottom: 1px solid #dcdcdc;
            h2{
                color: #cc3333;
                text-align: left;
                padding-top: r(20);
                font-size: r(30);
            }
            span{
                display: inline-block;
                margin-top: r(10);
            }
            p{
                color: #333333;
                text-align: left;
                font-size: r(20);
                color: #666666;
                width: 98%;
                margin-top: r(5);
            }
        }
        
        .left-btn{
            float: left;
            width: 40%;
            height: r(80);
            border: 1px solid #b7b7b7;
            background: #ffffff;
            border-radius: 5px;
            margin-left: r(25);
            margin-top: r(30);
            color: #b7b7b7;
            outline: none;
            font-size: r(25);
        }
        .right-btn{
            float: right;
            width: 40%;
            height: r(80);
            background: #cc3333;
            border-radius: 5px;
            margin-right: r(25);
            margin-top: r(30);
            color: white;
            outline: none;
            font-size: r(25);
        }
    }

}
*{
    margin: 0;
    padding: 0;
}
body,html{
    width: 100%;
    height: 100%;
}
.web{
    width: 100%;
    height: 100%;
    
    position: relative;
    
    header{
        position: absolute;
        top: 0;
        height: r(88);
        width: 100%;
        background: #f7f7f7;
        .head{
            height: r(88);
            border-bottom: 1px solid #c1c1c1;
            .header_left{
                float: left;
                width: r(22);
                height: r(37);
                margin-top: r(30);
                margin-left: r(30);
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .head-tu{
                width: r(35);
                height: r(35);
                float: left;
                margin-top: r(28);
                margin-left: r(25);
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .header_right{
                float: right;
                font-size: r(26);
                margin-top: r(26);
                margin-right: r(23);
                color: #c1c1c1;
            }
            .header_middle{
                margin: 0 auto;
                font-size: r(34);
                text-align: center;
                padding-top: r(20);
            }
        }
    }
    section{
        position: absolute;
        top: r(88);
        bottom: 0;
        width: 100%;
        overflow: scroll;
        background: #f3f4f6;
        .top{
            width: 100%;
            height: r(300);
            img{
                width: 100%;
                height: 100%;
            }
        }
        .nav{
            width: 100%;
            height: r(60);
//          line-height: r(60);
            
            .nav-font{
                float: left;
                margin-top: r(20);
                margin-left: r(20);
            }
            .nav-right1{
                float: right;
                width: r(90);
                height: r(25);
                 margin-top: r(20);
//          margin-left: r(20);
                img{
                    width: r(25);
                    height: r(25);
                }
                span{
                    float: right;
                    padding-right: r(20);
                }
            }
            .nav-right2{
                float: right;
                width: r(90);
                height: r(25);
                margin-top: r(20);
                margin-right: r(20);
                img{
                    width: r(25);
                    height: r(25);
                }
                span{
                    float: right;
                }
            }
        }
        .favourable{
            width: 100%;
            height: r(150);
            background: white;
            .favourable-tu{
                width: 92%;
                height: r(110);
                margin-top: r(20);
                margin-left: r(20);
                display: inline-block;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .content1{
            @include ct; 
        }
        .content2{
            @include ct; 
        }
        .content3{
            @include ct; 
        }
        .content4{
            @include ct;
        }
        .bottom1{
            width: 90%;
            height: r(95);
            margin: 0 auto;
            text-align: center;
            border-bottom: 1px solid #e0e0e0;
            span{
                display: inline-block;
                margin-top: r(30);
                margin-right: r(10);
                font-size: r(25);
            }
        }
        .bottom2{
            width: 100%;
            height: r(195);
            .content-bom{
                width: r(170);
                height: r(100);
                margin: r(60) auto;
                .bottom2-tu{
                    width: r(50);
                    height: r(45);
                    float: left;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                span{
                    padding-left: r(5);
                    color: #afaeae;
                }
                p{
                    display: inline-block;
                    padding-top: r(10);
                    color: #afaeae;
                    font-size: r(20);
                }
            }
            
            
        }
    }
    .return{
        position: fixed;
        right: 0.5rem;
        bottom: 3.75rem;
        z-index: 99;
        a{
            display: inline-block;
            background: url(../../img/shop/pic10.png) no-repeat;
            background-size: 100%;
            width: r(60);
            height: r(60);
        }
    }
}